<script setup>
import { ref, reactive, onMounted } from "vue"
import copyw from "@/components/copy.vue"
import useClipboard from "vue-clipboard3"
import { message } from "ant-design-vue"
import dayjs from "dayjs"

const { toClipboard } = useClipboard()
const state = reactive({
    sourceValue: "",
    dataMs: "",
    dataS: "",
    dataFormat: "",
    now: dayjs().format("YYYY-MM-DD HH:mm:ss"),
})

const copy = async (msg) => {
    try {
        // 复制
        await toClipboard(msg + "")
        message.success("复制成功")
        // 复制成功
    } catch (e) {
        // 复制失败
    }
}

function encode() {
    let num = Number(state.sourceValue)
    if (num == "" || num == null || num == undefined || num == 0) {
        state.dataMs = ""
        state.dataS = ""
        state.dataFormat = ""
        return
    }
    if (isNaN(num)) {
        // 不是数字,可能是时间格式
        let time = dayjs(state.sourceValue)
        if (time.isValid()) {
            state.dataMs = time.valueOf()
            state.dataS = parseInt(time.valueOf() / 1000)
            state.dataFormat = time.format("YYYY-MM-DD HH:mm:ss")
        } else {
            state.dataMs = ""
            state.dataS = ""
            state.dataFormat = ""
        }
        return
    }
    // 是数字，判断是秒级还是毫秒级
    if (num > 1000000000000) {
        state.dataMs = num
        state.dataS = parseInt(num / 1000)
        state.dataFormat = dayjs(num).format("YYYY-MM-DD HH:mm:ss")
    } else {
        state.dataMs = num * 1000
        state.dataS = num
        state.dataFormat = dayjs(num * 1000).format("YYYY-MM-DD HH:mm:ss")
    }
}
function change() {
    if (state.sourceValue === "") {
        state.dataMs = ""
        state.dataS = ""
        state.dataFormat = ""
        return
    }
    encode()
}

onMounted(() => {
    setInterval(() => {
        state.now = dayjs().format("YYYY-MM-DD HH:mm:ss")
    }, 1000)
})
</script>

<template>
    <div class="k">
        <div class="content f_col">
            <h1 class="f_row" style="justify-content: flex-start">
                Timestamp转换<copyw title="Timestamp转换" ckey="dotimestamp"></copyw>
            </h1>

            <div class="f_row">
                <div style="width: 200px">现在：{{ state.now }}</div>

                <a style="margin-left: 12px; cursor: pointer" @click="copy(state.now)">复制</a>
            </div>
            <div style="width: 100%">
                <a-input class="kuang" v-model:value="state.sourceValue" placeholder="请输入时间" @change="change" />
            </div>
            <div style="width: 100%">
                <div class="f_row" style="justify-content: flex-start">
                    <h3>毫秒级时间戳</h3>
                    <a style="margin-bottom: 8px; margin-left: 12px; cursor: pointer" @click="copy(state.dataMs)"
                        >复制</a
                    >
                </div>
                <div v-text="state.dataMs" style="width: 100%"></div>
            </div>
            <div style="width: 100%">
                <div class="f_row" style="justify-content: flex-start">
                    <h3>级时间戳</h3>
                    <a style="margin-bottom: 8px; margin-left: 12px; cursor: pointer" @click="copy(state.dataS)"
                        >复制</a
                    >
                </div>
                <div v-text="state.dataS" style="width: 100%"></div>
            </div>
            <div style="width: 100%">
                <div class="f_row" style="justify-content: flex-start">
                    <h3>时间格式</h3>
                    <a style="margin-bottom: 8px; margin-left: 12px; cursor: pointer" @click="copy(state.dataFormat)"
                        >复制</a
                    >
                </div>
                <div v-text="state.dataFormat" style="width: 100%"></div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.content {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    min-height: calc(100vh - 66px);
    justify-content: flex-start;
    background-color: var(--Neutral-12);
    border-radius: 12px;
    border: 1px solid var(--Neutral-10);
}

:where(.k) {
    background-color: var(--page-bg-color);
    height: 100%;
    padding: 16px;
}

h1 {
    color: var(--character-85);
    font-size: 24px;
    margin-bottom: 8px;
}

h3 {
    color: var(--character-75);
    font-size: 16px;
    margin-bottom: 8px;
}

a {
    color: var(--Geek-Blue-5);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--Geek-Blue-4);
}

div[v-text] {
    background-color: var(--Neutral-11);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--Neutral-10);
    color: var(--character-85);
    min-height: 40px;
}

:deep(.ant-input) {
    background-color: var(--Neutral-11) !important;
    border: 1px solid var(--Neutral-10) !important;
    color: var(--character-85) !important;
    border-radius: 8px;
    padding: 8px 16px !important;
    height: 40px;
    transition: all 0.3s ease;
}

:deep(.ant-input:hover) {
    border-color: var(--Neutral-9) !important;
}

:deep(.ant-input:focus) {
    border-color: var(--Neutral-8) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
</style>
